<!--
 * @Author: sundl
 * @Date: 2021-04-12 13:56:10
 * @project: 天津YQ平台
 * @desc: 外部来文详情签收反馈子模块的指令信息卡片
-->
<template>
  <div class="wrap">
    <!-- 折叠板标题-指令信息 -->
    <div v-if="orders.length">
      <div class="order-item" v-for="(item, index) in orders" :key="item.id">
        <dg-row type="flex" justify="space-between" class="wrap-header">
          <dg-col :width="'2rem'" class="wrap-icon">
            <i
              :class="item.isCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
              v-if="Array.isArray(item.zljsfkList) && item.zljsfkList.length"
              @click="handleCollpaseClick(index)"
            ></i>
          </dg-col>
          <dg-col>
            <p class="wrap-opinion">{{ item.nxdzl }}</p>
            <dg-row type="flex" justify="space-between">
              <el-breadcrumb separator="|">
                <el-breadcrumb-item>发布时间：{{ item.fbsj | filterText }} </el-breadcrumb-item>
                <el-breadcrumb-item>发布人员：{{ item.fbrxm | filterText }} </el-breadcrumb-item>
              </el-breadcrumb>
              <el-breadcrumb separator="|">
                <el-breadcrumb-item>已签收: {{ item.qsdwsl | filterText }}</el-breadcrumb-item>
                <el-breadcrumb-item>未签收: {{ item.jsdwsl - item.qsdwsl }}</el-breadcrumb-item>
                <el-breadcrumb-item>已反馈: {{ item.fkdwsl | filterText }}</el-breadcrumb-item>
                <el-breadcrumb-item>未反馈: {{ item.jsdwsl - item.fkdwsl }}</el-breadcrumb-item>
                <el-breadcrumb-item>最晚反馈时间: {{ item.zwfksj | filterText }}</el-breadcrumb-item>
              </el-breadcrumb>
            </dg-row>
          </dg-col>
        </dg-row>
        <dg-row class="footer" :style="footerBackColor">
          <el-breadcrumb separator="|">
            <el-breadcrumb-item>
              发布单位：<span v-translate="{ code: BM_DEPT, value: item.fbdwdm }"></span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--  v-if="isShow" TODO:21号需求，暂时隐藏-->
              指令类型：
              <span v-translate="{ code: BM_ZLLX, value: item.zllx }"></span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>联系方式：{{ item.fbrdh | filterText }}</el-breadcrumb-item>
          </el-breadcrumb>
        </dg-row>

        <!-- 折叠板内容-签收反馈信息 -->
        <div class="wrap-content" :class="{ collapse: item.isCollapse }" v-show="!item.isCollapse">
          <dg-row
            type="flex"
            justify="space-between"
            class="timeline"
            v-for="(cItem, index) in item.zljsfkList"
            :key="'zljsfk' + index"
          >
            <dg-col width="2rem" class="timeline-icon">
              <i :class="cItem | filterStatus"></i>
            </dg-col>
            <dg-col class="timeline-info">
              <!-- 1签收状态/2反馈状态：zt(签收状态：0-未签收；1-已签收; 反馈状态：0-未反馈；1-按时反馈；2-超时反馈) -->
              <dg-row type="flex" :gutter="2" align="middle" justify="space-between">
                <div class="timeline-info__top">
                  <span class="timeline-info__dept" v-translate="{ code: BM_DEPT, value: cItem.jsdwdm }"></span>
                  <!-- 签收 -->
                  <dg-tag v-if="+cItem.zlsjlx === 1" effect="dark" :type="cItem.qszt | filterTagType">
                    <span v-translate="{ code: BM_QSZT, value: cItem.qszt }"></span>
                  </dg-tag>
                  <!-- 反馈 -->
                  <dg-tag v-if="+cItem.zlsjlx === 2" effect="dark" :type="cItem.fkzt | filterTagType">
                    <span v-translate="{ code: BM_FKZT, value: cItem.fkzt }"></span>
                  </dg-tag>
                </div>
                <div class="timeline-info__sign">
                  <template>
                    <span>{{ cItem.zlsjlx | filterFeedbackSignText }}人：{{ cItem.xm | filterText }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{ cItem.zlsjlx | filterFeedbackSignText }}时间：{{ cItem.sj | filterText }}</span>
                  </template>
                </div>
              </dg-row>
              <dg-row>
                <!-- 为反馈时需要展示反馈内容和附件 -->
                <div v-if="+cItem.zlsjlx === 2">
                  <div>
                    <p class="timeline-info__content">{{ cItem.nr | filterText }}</p>
                    <!-- 更多的浮层 -->
                    <div class="timeline-info__more">
                      <el-popover v-if="cItem.nr" popper-class="" placement="right" trigger="hover">
                        <span slot="reference" class="">更多 ></span>
                        <p class="">
                          {{ cItem.nr }}
                        </p>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </dg-row>
              <dg-row style="width: 50%" v-if="Array.isArray(cItem.fileHolderList) && cItem.fileHolderList.length">
                <enclosure :files="cItem.fileHolderList"></enclosure>
              </dg-row>
            </dg-col>
          </dg-row>
        </div>
      </div>
    </div>
    <no-record v-else></no-record>
  </div>
</template>

<script>
import Enclosure from '@/components/layout/enclosure';
import { searchOrderList } from '@/api/common';
import { BM_ZLLX, BM_FKZT, BM_QSZT, BM_DEPT } from '@/common/codeDic';

export default {
  name: 'instruction-info',
  components: {
    Enclosure
  },
  props: {
    footerColor: {
      type: String,
      default: 'rgba(64, 144, 255, 0.08)'
    }
  },
  filters: {
    filterStatus(data) {
      const status = +data.zlsjlx === 1 ? data.qszt : data.fkzt;
      return +status === 1 ? 'success-icon el-icon-success' : 'warning-icon el-icon-warning';
    },
    filterFeedbackSignText(val) {
      return +val === 1 ? '签收' : '反馈';
    },
    filterTagType(val) {
      const color = {
        0: 'danger',
        1: 'success',
        2: 'danger'
      };
      return color[val];
    }
  },
  data() {
    return {
      BM_DEPT,
      BM_FKZT,
      BM_QSZT,
      BM_ZLLX,
      orders: []
      // 当签收反馈为110报警呈批单（指挥）跳转进来时，不进行显示 TODO:21号需求，暂时隐藏
      //   isShow:true
    };
  },

  computed: {
    footerBackColor() {
      return {
        backgroundColor: this.footerColor
      };
    },
    flowId() {
      return this.$route.params.id || '';
    },
    zlly() {
      return this.$route.params.zlly || '1';
    }
  },

  methods: {
    handleCollpaseClick(index) {
      this.orders[index].isCollapse = !this.orders[index].isCollapse;
    },
    fecthOrders(
      query = {
        qszt: '',
        fkzt: '',
        fbdwdm: '',
        jsdwdm: ''
      }
    ) {
      const { qszt, fkzt, fbdwdm, jsdwdm } = query;
      const params = {
        page: 0,
        size: 100,
        sort: JSON.stringify({ fbsj: 'desc' }),
        searchCondition: JSON.stringify([
          { name: 'flowid', value: this.flowId, op: '=' },
          { name: 'query_fkfj', value: 'true', op: '=' },
          { name: 'query_tjxx', value: 'true', op: '=' },
          { name: 'query_zljsfk', value: 'true', op: '=' },
          { name: 'query_zlsjlx', value: '1,2', op: '=' },
          { name: 'qszt', value: qszt, op: '=' },
          { name: 'fkzt', value: fkzt, op: '=' },
          { name: 'fbdwdm', value: fbdwdm, op: 'in' },
          { name: 'jsdwdm', value: jsdwdm, op: 'in' },
          { name: 'zlly', value: this.zlly, op: '=' }
        ])
      };
      searchOrderList(params).then((res) => {
        if (res.data && res.data.content) {
          this.orders = res.data.content.map((item) => {
            return {
              ...item,
              isCollapse: true
            };
          });
        }
      });
    }
  },
  created() {
    //TODO:21号需求，暂时隐藏
    // if (this.$route.params.zlly == '2') {
    //   this.isShow = false;
    // }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 1rem;
  &-header {
    box-sizing: border-box;
    padding: 1.5rem 1.75rem;
  }
  &-opinion {
    margin-bottom: 0.8rem;
    font-family: MicrosoftYaHei;
    font-size: 0.88rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: rgba(0, 0, 0, 1);
    opacity: 0.85;
  }
  &-icon {
    align-self: center;
    cursor: pointer;
  }
  &-content {
    overflow: hidden;
    transition: height 0.8s ease;
    padding: 1.5rem 1.75rem;
  }

  .collapse {
    height: 0;
    padding: 0;
  }
}
.order-item {
  border: solid 0.06rem rgba(0, 0, 0, 0.08);
  & + & {
    margin-top: 12px;
  }
}
.footer {
  padding: 0.85rem 2rem;
  background-color: rgba(64, 144, 255, 0.08);
}
/deep/ .el-breadcrumb__inner {
  color: rgba(0, 0, 0, 0.45) !important;
}

.timeline {
  position: relative;
  margin-bottom: 1rem;
  border: none !important;
  &:not(:last-child)::after {
    position: absolute;
    top: 1rem;
    left: 11px;
    z-index: 1;
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
  }

  .success-icon {
    color: #67c23a;
    position: relative;
    z-index: 9;
    top: -7px;
    background-color: #fff;
  }
  .warning-icon {
    color: #f56c6c;
    position: relative;
    z-index: 9;
    top: -7px;
    background-color: #fff;
  }
  &-icon {
    font-size: 1.5rem;
  }
  &-info {
    padding: 0.8rem 1.5rem;
    // width: 80.94rem;
    min-height: 4.75rem;
    border-radius: 0.13rem;
    border: solid 0.06rem rgba(0, 0, 0, 0.15);
    &__top {
      display: flex;
    }
    &__dept {
      margin-right: 25px;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 1);
      opacity: 0.85;
    }
    &__sign {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.45);
    }
    &__bottom {
      margin-top: 0.5rem;
      font-family: MicrosoftYaHei;
      font-size: 0.88rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: rgba(0, 0, 0, 0.45);
      &--content {
        margin-bottom: 1rem;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.85;
      }
    }
    &__content {
      position: relative;
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
    }
    &__more {
      display: flex;
      text-align: right;
      flex-direction: column;
      background-color: #fff;
      color: #4090ff;
    }
  }
}
</style>
